// JavaScript Document
const FPSlimit = 30;
var curFPS = 0;
var numFramesDrawn = 0;
var fpsInterval = setInterval(updateFPS, 1000);
var numResourcesLoaded = 0;
var totalResources = 1;
var canvas = null;
var ctx = null;
var images = {};
var grid = 32;
var mapLoaded = false;
var contentLoaded = false;
var lvl = 1;

//Init keys
var keys = new Array();
var keylock = new Array();
window.addEventListener('keydown', keyDown, true);
window.addEventListener('keyup', keyUp, true);
window.addEventListener('blur', canvasLostFocus, true);

function canvasLostFocus(evt) {
	keys = new Array();
}
function keyDown(evt) {
	keys[evt.keyCode] = true;
}
function keyUp(evt) {
	keys[evt.keyCode] = false;
	keylock[evt.keyCode] = false;
}

window.onload = init;

function init() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext("2d");
	initListeners();
	loadContext();
	setInterval(gameLoop, 1000/FPSlimit);
}

function loadContext () {
	loadImage("TilesSprite2");
}

function loadImage(name) {
  images[name] = new Image();
  images[name].onload = function() { 
	  resourceLoaded();
  }
  images[name].src = "img/" + name + ".png";
}

function resourceLoaded() {
  numResourcesLoaded += 1;
  if(numResourcesLoaded === totalResources) {
	contentLoaded = true;
  }
}

function updateFPS() {
	curFPS = numFramesDrawn;
	numFramesDrawn = 0;
}		

function gameLoop() {
	if (contentLoaded && mapLoaded) {
		update();
		clear();
		draw();
	} else {
		drawLoading();
	}
}

function updateKeys() {
	for (i = 0; i<=9; i++) {
		if ((48+i) in keys && keys[48+i]) { //left
			if (!keylock[48 + i]) {
				addInput(i);
				keylock[48 + i] = true;
			}
		}
		if ((96+i) in keys && keys[96+i]) {
			if (!keylock[96 + i]) {
				addInput(i);
				keylock[96 + i] = true;
			}
		}
	}
}

function draw() {
	//ctx.drawImage(images["TilesSprite2"], 0, 0);
	drawWorld();
	p.draw();
	drawHud();
}

function drawLoading() {
	ctx.save();
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	ctx.fillStyle = "#FFF";
	
	ctx.font = 'bold 30px sans-serif';
	ctx.lineWidth = 1;
    ctx.strokeStyle = "#000";
    var dots = "";
    for (i = 1; i < (numFramesDrawn / 15 % 30); i++) {
    	dots += ".";
    	if (i > 2) {
    		break;
    	}
    }
    var numResourcesLoaded = 0;
var totalResources = 1;
	ctx.fillText('Loading' + dots, canvas.width / 2 - 50, canvas.height / 2 - 20);
	ctx.strokeText('Loading' + dots, canvas.width / 2 - 50, canvas.height / 2 - 20);
		ctx.fillText(numResourcesLoaded + "/" + totalResources, canvas.width / 2 - 15, canvas.height / 2 + 10);
	ctx.strokeText(numResourcesLoaded + "/" + totalResources, canvas.width / 2 - 15, canvas.height / 2 + 10);
	++numFramesDrawn;
	
	ctx.restore();
}

function alertSeveralTimes() {	
	//Testfunction
	/*
	spriteSheet1.src = "img/TilesSprite1.png";
	alert(canvas.width);*/
	/*
	ctx.drawImage(spriteSheet1, 
	Math.random() * canvas.width, Math.random() * canvas.height);*/
}

function clear() {
	// Store the current transformation matrix
	ctx.save();
	// Use the identity matrix while clearing the canvas
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	// Restore the transform
	ctx.restore();
}